<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<style>
			/* 相对定位：box2图片压在box1上 */
			div.box1{
				width: 250px;
				height: 250px;
				background: url(img/3.gif);
				background-size: 100%;
				position: absolute;
				left: 0px;
				top: 0px;
				z-index: 1;
			}
			div.box2{
				width: 250px;
				height: 250px;
			background: url(img/2.png);
			background-size: 100%;
			/* 声明一个相对定位与方向属性一起 */
			position: absolute;
			left: 0px;
			top: 0px;
			z-index: 2;
			}
			
		</style>
	</head>
	<body>
	<!-- 定位：相对定位，相对于父级元素定位
		         功能：单一元素定位，元素在正常文档流当中  推荐
			     pasition属性：relative；声明元素可以用相对定位意义
			     方向属性：left、right、top、bottom、
			     堆叠顺序属性：z-index
			          属性值数值，数值越大，越靠前
			  绝对定位：按照定位祖先【页面左上角】进行定位
				功能：脱离文档流，不占据原来空间
				方向属性和叠加属性和相对以及固定定位共用
				pasition属性：absolute；声明元素可以使用绝对定位
				
		实际开发中：相对定位结合绝对定位一起使用       侧边栏、左栏、遮罩【挂靠】
		案例：左栏弹出【html结构，语义化标签+css两种定位+js】
		-->
		<div class="box1"></div>
		<div class="box2" ></div>
	</body>
</html>